<template>
  <div>
    <!-- <router-view v-if="$route.path === '/setting/role/addRoles'"></router-view> -->
    <page-layout class="user">
      <div class="search-wrapper">
        <div>
          <a-input
            placeholder="请输入权限名称"
            v-model="search_value"
            class="search-input"
          >
            <a-icon
              slot="prefix"
              type="search"
              style="font-size: 28px; color: #999"
            />
          </a-input>
          <a-button type="primary" class="search-button" @click="handelSearch"
            >搜索</a-button
          >
        </div>
        <a-button
          style="width: 120px; height: 54px"
          type="primary"
          @click="
            $router.push({
              path: '/setting/permissionsAdd',
              query: { random: random }
            })
          "
        >
          新增
        </a-button>
      </div>

      <div class="tabel-wrapper">
        <standard-table
          :columns="columns"
          :dataSource="dataSource"
          @change="onChange"
          :key="dataSource.name"
          :loading="loading"
          :pagination="pagination"
          size="large"
        >
          <div slot="created_at" slot-scope="{ text }">
            <!-- <a-tag
              style="
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
              "
              :color="`${text === 1 ? '#00CA13' : '#FF2525'}`"
            >
              {{ text === 1 ? "启用" : "停用" }}
            </a-tag> -->
            <!-- {{ new Date(text).getFullYear() }} -->
            {{ moment(text).format("YYYY-MM-DD") }}
          </div>
          <div slot="updated_at" slot-scope="{ text }">
            <!-- <a-tag
              style="
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
              "
              :color="`${text === 1 ? '#00CA13' : '#FF2525'}`"
            >
              {{ text === 1 ? "启用" : "停用" }}
            </a-tag> -->
            <!-- {{ new Date(text).getFullYear() }} -->
            {{ moment(text).format("YYYY-MM-DD") }}
          </div>
          <div slot="action" slot-scope="{ text, record }">
            <!-- {{ record }} -->
            <!-- <a href="#/task/detail">查看</a>
            <a-divider type="vertical" style="background: #0097e0" /> -->
            <a
              :href="`#/setting/permissionsAdd?random=${random}&&id=${record.key}`"
              >编辑</a
            >
            <a-divider type="vertical" style="background: #0097e0" />
            <a-popconfirm
              title="确定需要删除此任务吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="() => confirm(record.key)"
              @cancel="() => cancel(record.key)"
              ><a>删除</a>
            </a-popconfirm>
          </div>
          <template slot="statusTitle">
            <a-icon @click.native="onStatusTitleClick" type="info-circle" />
          </template>
        </standard-table>
      </div>
    </page-layout>
  </div>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import { getPermissions, deleteItem } from "@/services/permissions";
import moment from "moment";
// import { mapMutations } from "vuex";
const columns = [
  {
    title: "ID",
    dataIndex: "key"
    // align: "center"
  },
  {
    title: "权限",
    dataIndex: "remark"
    // align: "center"
  },
  {
    title: "权限名称",
    dataIndex: "name"
    // align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    scopedSlots: { customRender: "created_at" },
    align: "center"
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    scopedSlots: { customRender: "updated_at" },
    align: "center"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];

export default {
  name: "permissions",
  components: {
    PageLayout,
    StandardTable
  },
  data() {
    return {
      record: "",
      desc: "需求管理中心",
      advanced: true,
      columns: columns,
      loading: true, //loading
      dataSource: [], //权限数据列表
      isRouterAlive: false, //控制页面刷新
      search_value: "", //搜索字段
      selectedRows: [],
      pagination: {
        size: "small",
        showSizeChanger: true,
        showQuickJumper: true,
        poposition: "bottom",
        pageSize: 5,
        current: 1,
        total: 0
        // hideOnSinglePage: true
      },
      random: ""
    };
  },
  activated() {
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
  },
  created() {
    // 初始数据
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
  },
  methods: {
    moment,
    /**获取权限列表 */
    loadTableData(data) {
      this.loading = true;
      getPermissions(data).then((res) => {
        this.loading = false;
        if (res.data.code == 20000 && res.data.data) {
          const { current_page, total, per_page } = res.data.data;
          Object.assign(this.pagination, {
            total: parseInt(total),
            current: parseInt(current_page),
            pageSize: parseInt(per_page)
          });
          this.dataSource = res.data.data.data.map((item) => {
            const { id, name, created_at, updated_at,remark} = item;
            return {
              key: id,
              name: name || "未知",
              remark:remark ,
              created_at: created_at || "未知",
              updated_at: updated_at || "未知"
            };
          });
          // console.log(res.data.data);
        }
        // console.log(res,"==========");
      });
    },

    /**删除权限 */

    confirm(key) {
      // 发起删除的请求
      deleteItem(key).then((res) => {
        // console.log(res, "delete");
        // 成功
        if (res.data.code === 20000) {
          // 提示信息
          this.$message.success({
            content: res.data.message || "删除成功~"
          });
          // 删除成功后重新获取数据
          const { pageSize, current } = this.pagination;
          this.loadTableData({ limit: pageSize, page: current });
        }
      });
      // this.$message.info(`点击了确定,行数为${key + 1}行`);
      // this.deleteRecord(key);
    },

    onChange(e) {
      const { current, pageSize } = e;
      this.loadTableData({ limit: pageSize, page: current });
    },
    handelSearch() {
      this.loadTableData({
        remark: this.search_value,
        limit: this.pagination.pageSize,
    
      });
    }
  }
};
</script>


<style lang="less">
.search-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  > div {
    .search-input input {
      padding-left: 45px !important;
    }
    display: flex;
    width: 60%;
    .ant-input-affix-wrapper {
      display: inline-block;
      width: calc(100% - 150px);
      height: 54px !important;
      input {
        height: 100% !important;
      }
      input::-webkit-input-placeholder {
        color: #9999;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #9999;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #9999;

        font-size: 17px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #9999;
      }
    }
    .search-button {
      margin-left: 30px;
      width: 120px;
      height: 54px;
    }
  }
}
.user {
  .tabel-wrapper {
    border-radius: 5px;
    // min-height: 450px;
    background-color: #fff;
    color: #1f1f1f;
    .ant-pagination {
      margin-top: 60px !important;
    }
    tr {
      height: 66px !important;
      // padding-left: 10px;
    }
    .ant-table-thead {
      padding-left: 20px;
      background: #effaff;
      & > tr > th {
        background: #effaff !important;
      }
    }
    .ant-table-tbody {
      padding-left: 20px;
    }
    .ant-table-pagination.ant-pagination {
      float: unset !important;
      text-align: center;
    }
  }
}
</style>
